<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			height: 2000px;
		}
	</style>
</head>
<body>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

	<button id="but" type="button">按钮</button>

	<script>

		/**
		 * 事件委托
		 */
		
		var ul = document.getElementsByTagName('ul')[0];
		ul.onclick = function(e) {
			var e = event || window.event,
				tar = e.target || e.scrElement;  //e.scrElement IE的事件
			console.log(tar)
			if(tar.nodeName.toLowerCase() == "li"){ //把dom节点转换成小写
				tar.style.color = "red";
			}
		}

		/**
		 * 事件监听
		 */
		
		var an = document.getElementById('but');
		var eventOne = function() {
			alert('1')
		}
		var eventTwo = function() {
			alert('2')
		}
		var eventSan = function() {
			var ul = document.getElementsByTagName('ul')[0];
			var li = ul.getElementsByTagName('li');
			for(var i = 0; i < li.length; i++) {
				li[i].style.color = '#000';
			}
		}

		an.addEventListener('click',eventOne);
		an.addEventListener('click',eventTwo);
		an.addEventListener('click',eventSan);
	</script>	
	
</body>
</html>